<template>
  <el-dialog
    :model-value="dialogSortVisible"
    title="设置排序"
    @close="cancelFn"
  >
    <div class="sort">
      <div>排序</div>
      <el-input v-model="sortVal" placeholder="排序" />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelFn">取消</el-button>
        <el-button type="primary" @click="confirmFn"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
// import * as http from "@/request/http";
// import { ElMessage } from "element-plus";
// import useSwitch from "../../hooks/components/useSwitch";
// import { ElMessageBox } from "element-plus";
const sortVal = ref(1);

const emits = defineEmits<{
  (e: "cancel"): void;
  (e: "confirm", p: number): void;
}>();

// 取消
const cancelFn = () => {
  emits("cancel");
};
// 确定
const confirmFn = () => {
  emits("confirm", sortVal.value);
};

const proPs = withDefaults(
  defineProps<{
    dialogSortVisible: boolean;
    id: number;
    sort: number;
  }>(),
  {
    dialogSortVisible: false,
    id: 0,
    sort: 0,
  }
);

watch(
  () => proPs.sort,
  () => {
    if (proPs.id != 0) {
      console.log(proPs.sort);
      sortVal.value = proPs.sort;
    }
  },
  {
    immediate: true,
  }
);

// 修改用户排序
</script>

<style scoped lang="less">
.sort {
  display: flex;
  .el-input {
    width: 30%;
  }
}
</style>
